<template>
    <div class="_fd-ai-panel">
        <!-- 对话头部 -->
        <div class="_fd-ai-header">
            <div class="_fd-ai-title">
                <i class="fc-icon icon-ai bright"></i>
                <span class="_fd-ai-name">{{ t('ai.name') }}</span>
            </div>
            <div class="_fd-ai-actions" v-if="messages.length">
                <div class="_fd-ai-action-btn" @click="clearChat">
                    <i class="fc-icon icon-delete2"></i>
                </div>
            </div>
        </div>

        <!-- 对话内容区域 -->
        <div class="_fd-ai-content" :class="{ '_fd-ai-content--centered': messages.length === 0 }" ref="chatContent">
            <!-- 欢迎消息 -->
            <div class="_fd-ai-welcome" v-if="messages.length === 0">
                <div class="_fd-ai-welcome-icon"></div>
                <h3>{{ t('ai.welcome') }}</h3>
                <p>{{ t('ai.info') }}</p>

                <!-- 示例问题 -->
                <div class="_fd-ai-welcome-suggestions">
                    <div class="_fd-ai-suggestions-header">
                        <span>{{ t('ai.try') }}</span>
                        <div class="_fd-ai-refresh-btn" @click="refreshSuggestions">
                            <i class="fc-icon icon-refresh2"></i>
                            {{ t('ai.change') }}
                        </div>
                    </div>
                    <div class="_fd-ai-suggestions-list">
                        <div
                            v-for="(suggestion, index) in suggestions"
                            :key="index"
                            class="_fd-ai-suggestion-item"
                            @click="selectSuggestion(suggestion)"
                        >
                            {{ suggestion }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 对话消息列表 -->
            <div class="_fd-ai-messages">
                <div v-for="(message, index) in messages" :key="index"
                     :class="['_fd-ai-message', `_fd-ai-message--${message.type}`]">
                    <!-- 用户消息 -->
                    <div v-if="message.type === 'user'" class="_fd-ai-message-content">
                        <div class="_fd-ai-message-bubble _fd-ai-message-bubble--user">
                            <div class="_fd-ai-message-text">{{ message.content }}</div>
                        </div>

                        <!-- 底部悬浮区域 -->
                        <div class="_fd-ai-message-footer">
                            <!-- 操作按钮 -->
                            <div class="_fd-ai-message-actions">
                                <div class="_fd-ai-action-btn" @click="rmMessage(index)">
                                    <i class="fc-icon icon-delete2"></i>
                                </div>
                                <div class="_fd-ai-action-btn" @click="copyMessage(message.content)">
                                    <i class="fc-icon icon-group"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- AI 复合消息（包含文字、思考链、错误状态） -->
                    <div v-else-if="message.type === 'ai'" class="_fd-ai-message-content">
                        <div class="_fd-ai-message-avatar"
                             :class="{ '_fd-ai-message-avatar--error': message.isError }"></div>
                        <div
                            class="_fd-ai-message-bubble"
                            :class="{
                                '_fd-ai-message-bubble--ai': !message.isError,
                                '_fd-ai-message-bubble--error': message.isError,
                                '_fd-ai-message-bubble--thinking': message.type === 'thinking',
                            }"
                        >
                            <template v-for="content in message.content">
                                <template v-if="content.type === 'tool'">
                                    <div v-if="content.steps && content.steps.length > 0"
                                         class="_fd-ai-thinking-section">
                                        <div class="_fd-ai-thinking-steps">
                                            <div
                                                v-for="(step, stepIndex) in content.steps"
                                                :key="stepIndex"
                                                :class="[
                                                    '_fd-ai-thinking-step',
                                                    { '_fd-ai-thinking-step--active': isThinking && index === messages.length - 1 },
                                                ]"
                                            >
                                                <div
                                                    class="_fd-ai-thinking-step-icon"
                                                    :class="{
                                                        '_fd-ai-thinking-step-icon--executing':
                                                            step.status !== 'end' && isThinking && index === messages.length - 1,
                                                        '_fd-ai-thinking-step-icon--completed':
                                                            step.status === 'end' && isThinking && index === messages.length - 1,
                                                    }"
                                                >
                                                    <template v-if="messages.length - 1 === index && isThinking">
                                                        <svg v-if="step.status === 'end'" height="12"
                                                             viewBox="0 0 12 12" fill="none">
                                                            <path
                                                                d="M10 3L4.5 8.5L2 6"
                                                                stroke="currentColor"
                                                                stroke-width="1.5"
                                                                stroke-linecap="round"
                                                                stroke-linejoin="round"
                                                            />
                                                        </svg>
                                                        <div class="_fd-ai-thinking-step-loading" v-else></div>
                                                    </template>
                                                    <div class="_fd-ai-thinking-step-pending" v-else></div>
                                                </div>
                                                <span class="_fd-ai-thinking-step-text">{{ step.title }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                                <template v-if="content.type === 'text'">
                                    <div v-if="content.text" class="_fd-ai-message-text">
                                        <MarkdownRenderer :content="content.text"/>
                                    </div>
                                </template>
                            </template>
                            <div v-if="message.isError" class="_fd-ai-message-text _fd-ai-message-text--error">
                                {{ t('ai.error') }}
                            </div>
                            <!-- 思考中状态 -->
                            <div class="_fd-ai-thinking-status" v-if="message.status === 'thinking'">
                                <div class="_fd-ai-thinking-indicator">
                                    <div class="_fd-ai-thinking-dot"></div>
                                    <div class="_fd-ai-thinking-dot"></div>
                                    <div class="_fd-ai-thinking-dot"></div>
                                </div>
                            </div>
                        </div>
                        <!-- 底部悬浮区域 -->
                        <div class="_fd-ai-message-footer" v-if="!isThinking || index !== messages.length - 1">
                            <!-- 操作按钮 -->
                            <div class="_fd-ai-message-actions">
                                <div class="_fd-ai-action-btn" @click="rmMessage(index)">
                                    <i class="fc-icon icon-delete2"></i>
                                </div>
                                <div class="_fd-ai-action-btn" @click="copyMessage(message.content)">
                                    <i class="fc-icon icon-group"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 输入区域 -->
        <div class="_fd-ai-input">
            <!-- 用户输入框 -->
            <div class="_fd-ai-input-container">
                <textarea
                    v-model="inputText"
                    @keydown="handleKeydown"
                    @input="handleInput"
                    :placeholder="t('ai.placeholder')"
                    class="_fd-ai-input-field"
                    :disabled="isThinking"
                ></textarea>
                <div
                    class="_fd-ai-send-btn"
                    :class="{ '_fd-ai-send-btn--disabled': !inputText.trim() && !isThinking }"
                    @click="sendMessage"
                >
                    <div class="fc-icon icon-suspend" v-if="isThinking"></div>
                    <div class="fc-icon icon-send" v-else></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import MarkdownRenderer from './MarkdownRenderer.vue';
import {copyTextToClipboard} from '../../utils';
import viewForm from '../../utils/form';

export default {
    name: 'FcAiPanel',
    inject: ['designer'],
    components: {
        MarkdownRenderer,
    },
    data() {
        return {
            page: 0,
            inputText: '',
            controller: null,
            isThinking: false,
            isUserAtBottom: true,
            suggestions: [],
            messages: [],
        };
    },
    computed: {
        t() {
            return this.designer.setupState.t;
        },
        api() {
            return this.designer.props.config?.ai?.api || 'https://api.form-create.com/ai/v2/chat/form';
        },
        token() {
            let token = this.designer.props.config?.ai?.token || '';
            if (token.indexOf('Bearer') === -1) {
                token = `Bearer ${token}`;
            }
            return token;
        },
    },
    methods: {
        sendMessage() {
            if (this.isThinking) {
                this.isThinking = false;
                this.controller && this.controller.abort();
                return;
            }
            if (!this.inputText.trim()) return;

            const userMessage = {
                type: 'user',
                content: this.inputText.trim(),
                timestamp: new Date(),
            };

            this.messages.push(userMessage);
            this.inputText = '';

            // 发送消息后强制滚动到底部
            this.isUserAtBottom = true;
            this.$nextTick(() => {
                this.scrollToBottom();
            });

            this.simulateThinking();
        },

        async simulateThinking() {
            this.isThinking = true;

            const aiMessage = {
                type: 'ai',
                content: [],
                status: 'thinking',
                timestamp: new Date(),
            };

            this.messages.push(aiMessage);
            this.saveHistory();

            this.callAiApi(aiMessage);
        },

        async callAiApi(aiMessage) {
            try {
                aiMessage.status = 'thinking';

                // 获取最后一条用户消息
                const userMessages = this.messages.filter(msg => msg.type === 'user');
                const lastUserMessage = userMessages[userMessages.length - 1];
                this.controller = new AbortController();
                const response = await fetch(this.api, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        Authorization: this.token,
                    },
                    body: JSON.stringify({
                        ui: 'vant',
                        basic: true,
                        form: {
                            rule: this.designer.setupState.getJson(),
                            option: this.designer.setupState.getOptionsJson(),
                        },
                        messages: [
                            {
                                role: 'user',
                                content: lastUserMessage.content,
                            },
                        ],
                    }),
                    signal: this.controller.signal,
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let fullText = '';
                let buffer = '';

                while (true) {
                    const {done, value} = await reader.read();
                    if (done) {
                        break;
                    }

                    const chunk = decoder.decode(value, {stream: true});

                    buffer += chunk;
                    const lines = buffer.split('\n');
                    buffer = lines.pop() || ''; // 保留不完整的行

                    for (const line of lines) {
                        const trimmedLine = line.trim();
                        if (trimmedLine.startsWith('data: ')) {
                            const data = trimmedLine.slice(6);

                            if (data === '[DONE]') {
                                aiMessage.status = 'completed';
                                this.isThinking = false;
                                this.$forceUpdate();
                                this.saveHistory();
                                return;
                            }

                            try {
                                const parsed = JSON.parse(data);

                                let content = parsed.choices?.[0]?.delta?.content;
                                if (content) {
                                    if (content.startsWith('[FC_TOOL]')) {
                                        const tool = JSON.parse(content.replace('[FC_TOOL]', ''));
                                        this.updateStep(aiMessage, tool);
                                        fullText = '';
                                    } else {
                                        if (content.trim().startsWith('```fcRuleDiff')) {
                                            content = `\n\`\`\`fcRuleDiff\n${JSON.stringify({
                                                newJson: content.trim().slice(13, -3).trim(),
                                                oldJson: viewForm.toJson({rule: this.designer.setupState.getRule()}),
                                            })}\n\`\`\`\n`;
                                        }
                                        fullText += content;
                                        let message = aiMessage.content[aiMessage.content.length - 1];
                                        if (!message || message.type !== 'text') {
                                            message = {type: 'text', text: ''};
                                            aiMessage.content.push(message);
                                        }
                                        message.text = fullText.trim();
                                    }

                                    this.$forceUpdate();
                                }
                            } catch (e) {
                                console.warn('解析流数据失败:', e, '数据:', data);
                            }
                        }
                    }
                }

                aiMessage.status = 'completed';
                this.isThinking = false;
                this.$forceUpdate();
            } catch (error) {
                console.error('AI API 调用失败:', error);
                this.isThinking = false;
                if (error.name === 'AbortError') {
                    aiMessage.status = 'completed';
                } else {
                    aiMessage.status = 'error';
                    aiMessage.isError = true;
                }
                this.$forceUpdate();
            }
            this.saveHistory();
        },
        updateStep(aiMessage, tool) {
            let flag = false;
            if (tool.id) {
                aiMessage.content.forEach(message => {
                    if (message.type === 'tool') {
                        message.steps.forEach(step => {
                            if (step.id === tool.id) {
                                step.title = tool.title;
                                step.status = tool.status;
                                flag = true;
                            }
                        });
                    }
                });
            }
            if (!flag) {
                let message = aiMessage.content[aiMessage.content.length - 1];
                if (!message || message.type !== 'tool') {
                    message = {type: 'tool', steps: []};
                    aiMessage.content.push(message);
                }
                message.steps.push({
                    title: tool.title,
                    status: tool.status,
                    id: tool.id,
                });
            }
        },
        handleKeydown(event) {
            if (event.key === 'Enter' && !event.shiftKey) {
                event.preventDefault();
                this.sendMessage();
            }
        },
        handleInput() {
            const textarea = event.target;
            textarea.style.height = 'auto';
            textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
        },
        copyMessage(content) {
            if (typeof content === 'string') {
                copyTextToClipboard(content);
            } else {
                copyTextToClipboard(
                    content
                        .map(item => {
                            if (item.type === 'text') {
                                return item.text;
                            }
                        })
                        .filter(text => !!text)
                        .join('\n')
                        .trim()
                );
            }
        },
        rmMessage(index) {
            this.messages.splice(index, 1);
        },
        clearChat() {
            this.messages = [];
            this.inputText = '';
            this.isThinking = false;
            localStorage.removeItem('fc_ai_chat');
        },
        refreshSuggestions() {
            const allSuggestions = [
                '生成一个就诊满意度问卷表单',
                '创建一个建议收集表单，包含联系人、联系邮箱、分类和建议内容',
                '追加一个用户信息表单',
                '添加一个标签组件，显示文本为 "Tag"',
                '生成一个Vue组件，实现金额输入框',
                '生成一个js版本的高精度加法',
                '添加一个日期选择器组件，用于选择出生日期',
                '删除商品简介字段',
                '当单选框选择 "选项1" 时，显示输入框组件',
                '设置输入框为必填，并限制长度必须大于13',
                '商品价格字段使用数字输入框组件',
                '给输入类组件补充占位提示文本（placeholder）',
                '添加手机号格式验证',
                '添加自定义验证：确认密码必须与密码一致',
                '将姓名和手机号并排显示在同一行',
            ];

            if (this.page * 4 < allSuggestions.length) {
                this.page++;
            } else {
                this.page = 1;
            }
            const startIndex = (this.page - 1) * 4;
            const endIndex = startIndex + 4;

            this.suggestions = allSuggestions.slice(startIndex, endIndex);
        },
        selectSuggestion(suggestion) {
            this.inputText = suggestion;
            this.sendMessage();
        },
        scrollToBottom() {
            const content = this.$refs.chatContent;
            if (content && this.isUserAtBottom) {
                content.scrollTop = content.scrollHeight;
            }
        },
        // 检查用户是否在滚动条底部
        checkIfUserAtBottom() {
            const content = this.$refs.chatContent;
            if (content) {
                const isAtBottom = content.scrollTop + content.clientHeight >= content.scrollHeight - 20;
                this.isUserAtBottom = isAtBottom;
            }
        },
        // 处理滚动事件
        handleScroll() {
            this.checkIfUserAtBottom();
        },
        getHistory() {
            const data = localStorage.getItem('fc_ai_chat');
            if (data) {
                this.messages = JSON.parse(data) || [];
            }
        },
        saveHistory() {
            localStorage.setItem('fc_ai_chat', JSON.stringify(this.messages));
        },
    },
    created() {
        this.getHistory();
        this.refreshSuggestions();
    },
    mounted() {
        this.$nextTick(() => {
            this.scrollToBottom();
            // 添加滚动事件监听
            const content = this.$refs.chatContent;
            if (content) {
                content.addEventListener('scroll', this.handleScroll);
            }
        });
    },

    beforeUnmount() {
        // 清理滚动事件监听
        const content = this.$refs.chatContent;
        if (content) {
            content.removeEventListener('scroll', this.handleScroll);
        }
        // 清理全局方法
        delete window._fd_copyCode;
        delete window._fd_importCode;
    },

    updated() {
        // 只在用户位于底部时才自动滚动
        this.$nextTick(() => {
            this.scrollToBottom();
        });
    },
};
</script>

<style scoped>
._fd-ai-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 头部样式 */
._fd-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 40px;
    border-bottom: 1px solid #ececec;
    background: #ffffff;
}

._fd-ai-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

._fd-ai-name {
    font-weight: 600;
    color: #262626;
    font-size: 14px;
}

._fd-ai-actions {
    display: flex;
    gap: 8px;
}

._fd-ai-action-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 3px;
    color: #666666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    opacity: 0.8;
}

._fd-ai-action-btn:hover {
    background: #f5f5f5;
    color: #262626;
    opacity: 1;
}

/* 内容区域样式 */
._fd-ai-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

/* 当没有消息时，让内容居中显示 */
._fd-ai-content--centered {
    justify-content: center;
    align-items: center;
}

._fd-ai-welcome {
    text-align: center;
    padding: 20px;
    color: #666666;
    max-width: 600px;
    margin: 0 auto;
}

._fd-ai-message-avatar,
._fd-ai-welcome-icon {
    background-image: url('');
    background-size: 45px;
    background-repeat: no-repeat;
    background-position: center;
}

._fd-ai-welcome-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background-color: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

._fd-ai-welcome h3 {
    margin: 0 0 12px;
    color: #262626;
    font-size: 24px;
    font-weight: 600;
}

._fd-ai-welcome p {
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 1.6;
    color: #666666;
}

/* 建议问题样式 */
._fd-ai-welcome-suggestions {
    text-align: left;
}

._fd-ai-suggestions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

._fd-ai-suggestions-header span {
    font-size: 14px;
    font-weight: 500;
    color: #262626;
}

._fd-ai-refresh-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    background: transparent;
    color: #aaaaaa;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

._fd-ai-refresh-btn:hover {
    background: #f5f5f5;
    color: #262626;
}

._fd-ai-suggestions-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

._fd-ai-suggestion-item {
    padding: 12px 16px;
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #f5f5f5;
    color: #262626;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.4;
}

._fd-ai-suggestion-item:hover {
    border-color: #2e73ff;
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 消息样式 */
._fd-ai-messages {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}

._fd-ai-message {
    display: flex;
    flex-direction: column;
}

._fd-ai-message-content {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    position: relative;
}

._fd-ai-message-content:hover ._fd-ai-message-footer {
    display: flex;
}

._fd-ai-message--user ._fd-ai-message-content,
._fd-ai-message--user ._fd-ai-message-actions {
    flex-direction: row-reverse;
}

._fd-ai-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-size: 20px;
}

._fd-ai-message-avatar--error {
    background-color: rgba(255, 46, 46, 0.05);
}

._fd-ai-message-bubble {
    min-width: 40px;
    min-height: 21px;
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 12px;
    position: relative;
    word-wrap: break-word;
    margin-bottom: 35px;
}

._fd-ai-message-bubble--user {
    background: #2e73ff;
    color: white;
    border-bottom-right-radius: 4px;
}

._fd-ai-message-bubble--ai {
    background: #f5f5f5;
    color: #262626;
    border-bottom-left-radius: 4px;
}

._fd-ai-message-bubble--thinking {
    background: rgba(46, 115, 255, 0.05);
    border: 1px solid #2e73ff;
    border-bottom-left-radius: 4px;
}

._fd-ai-message-bubble--error {
    background: rgba(255, 46, 46, 0.05);
    color: #ff2e2e;
    border: 1px solid #ff2e2e;
    border-bottom-left-radius: 4px;
}

._fd-ai-message-text {
    font-size: 14px;
    line-height: 1.5;
}

._fd-ai-message-text :deep(pre) {
    margin: 0;
    background: transparent;
    padding: 0;
    border-radius: 0;
    overflow: visible;
}

._fd-ai-message-text :deep(code) {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-family: inherit;
    font-size: inherit;
}

._fd-ai-message-actions {
    display: flex;
    gap: 4px;
}

._fd-ai-message-text--error {
    color: #ff2e2e;
    font-weight: 500;
}

/* 思考中状态 */
._fd-ai-thinking-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 8px 0;
}

/* 底部悬浮区域 */
._fd-ai-message-footer {
    position: absolute;
    bottom: 6px;
    left: 43px;
    display: none;
    align-items: center;
    gap: 8px;
}

/* AI 消息的 footer 在右边 */
._fd-ai-message--user ._fd-ai-message-footer {
    right: 0;
    left: unset;
}

/* 思考指示器 */
._fd-ai-thinking-indicator {
    display: flex;
    gap: 3px;
    align-items: center;
}

._fd-ai-thinking-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #666666;
    animation: thinking-pulse 1.4s ease-in-out infinite both;
}

._fd-ai-thinking-dot:nth-child(1) {
    animation-delay: -0.32s;
}

._fd-ai-thinking-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes thinking-pulse {
    0%,
    80%,
    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 思考内容 */

._fd-ai-thinking-section {
    margin: 8px 0;
}

._fd-ai-thinking-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

._fd-ai-thinking-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 2px 0;
    font-size: 13px;
    color: #aaaaaa;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid #ececec;
}

._fd-ai-thinking-step--active {
    color: #262626;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateX(2px);
    border: 0 none;
}

._fd-ai-thinking-step-text {
    position: relative;
    z-index: 1;
}

._fd-ai-thinking-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    color: #aaaaaa;
    background: #ececec;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

._fd-ai-thinking-step-icon--executing {
    color: #2e73ff;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    transform: scale(1.1);
    animation: pulse 1.5s ease-in-out infinite;
}

._fd-ai-thinking-step-icon--completed {
    color: #00c050;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

@keyframes pulse {
    0%,
    100% {
        transform: scale(1.1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

._fd-ai-thinking-step-loading {
    width: 10px;
    height: 10px;
    border: 2px solid #2e73ff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

._fd-ai-thinking-step-pending {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #aaaaaa;
    opacity: 0.5;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 输入区域样式 */
._fd-ai-input {
    padding: 20px 24px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

._fd-ai-input-container {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    background: #f5f5f5;
    border-radius: 15px;
    padding: 12px 16px;
    border: 1px solid #ececec;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

._fd-ai-input-container:focus-within {
    border-color: #2e73ff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.15);
}

._fd-ai-input-field {
    flex: 1;
    border: none;
    background: transparent;
    resize: none;
    outline: none;
    font-size: 15px;
    line-height: 1.6;
    color: #262626;
    min-height: 24px;
    max-height: 120px;
    font-family: inherit;
    font-weight: 400;
    padding: 4px 0;
}

._fd-ai-input-field::placeholder {
    color: #aaaaaa;
    font-weight: 400;
}

._fd-ai-send-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #2e73ff;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

._fd-ai-send-btn:hover:not(._fd-ai-send-btn--disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

._fd-ai-send-btn--disabled {
    background: #aaaaaa;
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

/* 输入框聚焦时的微动画 */
._fd-ai-input-container:focus-within ._fd-ai-send-btn {
    transform: scale(1.02);
}

/* 输入框占位符动画 */
._fd-ai-input-field:focus::placeholder {
    opacity: 0.7;
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* 滚动条样式 */
._fd-ai-content {
    scrollbar-width: thin;
    scrollbar-color: #ececec transparent;
}

._fd-ai-content::-webkit-scrollbar {
    width: 6px;
}

._fd-ai-content::-webkit-scrollbar-track {
    background: transparent;
}

._fd-ai-content::-webkit-scrollbar-thumb {
    background: #ececec;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

._fd-ai-content:hover::-webkit-scrollbar-thumb {
    opacity: 1;
}

._fd-ai-content::-webkit-scrollbar-thumb:hover {
    background: #aaaaaa;
}
</style>
